<template>
  <div>
    <Row class="banner">
      <h1>时效性风险</h1>
      <h2>对贵阳市消防支队所有的流程事项超时情况感知</h2>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="8">
        <Card style="margin-bottom:12px;">
          <p slot="title">
            <span>流程事项及时率</span>
          </p>
          <div class="chart" id="chart-timeliness-rate"></div>
          <Divider />
          <span class="text">及时处理事务：{{handleInTime}}个</span>
          <Spin fix size="large" v-show="loading.timelinessRate"></Spin>
        </Card>
        <Card>
          <p slot="title">
            <span>流程事项超时情况</span>
          </p>
          <div class="chart" id="chart-overtimed-rank"></div>
          <Divider />
          <span class="text">产生超时事务：{{handleOvertimed}}个</span>
          <Spin fix size="large" v-show="loading.overtimedRank"></Spin>
        </Card>
      </Col>
      <Col span="16">
        <Card>
          <p slot="title">
            <span>时效性风险一览表</span>
          </p>
          <ul class="toolbar" slot="extra">
            <li class="item">
              <span class="text">按时间筛选</span>
              <Date-picker
                type="datetimerange"
                placeholder="选择起止日期和时间"
                style="width:320px;"
                size="default"
                @on-change="handleSelectedDate"
              ></Date-picker>
            </li>
            <li class="item">
                <Input
                v-model="keyword"
                size="default"
                enter-button="立即搜索"
                :search="true"
                placeholder="请输入事项名称搜索"
                @on-search="renderTable(0)"
              ></Input>
            </li>
          </ul>
          <Table :columns="tableColumns" :data="tableData"></Table>
          <Divider />
          <Page :total="pageCount" :page-size="pageSize" show-elevator  @on-change="renderTable"></Page>
          <Spin fix size="large" v-show="loading.table"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "",
  data() {
    return {
      loading:{
        timelinessRate:false,
        overtimedRank:false,
        table:false
      },
      option:{
        timelinessRate:null,
        overtimedRank:null
      },
      handleInTime:0,
      handleOvertimed:0,
      startTime:this.dateShift(-722) + ' 00:00:00',
      endTime:this.dateShift(0)+' 23:59:59',
      keyword:null,
      tableColumns:[{
        title:'序号',key:'index',align:'center',width:80
      },{
        title:'事项名称',key:'taskTitle',align:'center'
      },{
        title:'开始时间',key:'taskStartTime',align:'center'
      },{
        title:'要求完成时间',key:'taskLimit',align:'center'
      },{
        title:'实际完成时间',key:'taskEndTime',align:'center'
      },{
        title:'责任人',key:'chargerName',align:'center',width:80
      },{
        title:'所属部门',key:'depName',align:'center'
      },{
        title:'逾期情况',key:'expiration',align:'center'
      }],
      tableData:[],
      pageCount:0,
      pageSize:13
    };
  },
  methods:{
    renderChart_TimelinessRate(){
      this.loading.timelinessRate = true
      this.option.timelinessRate = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: ["及时处理的事务", "未及时处理的事务"],
          textStyle: { fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}%" },
        color: [this.COLORS[0], this.COLORS[7]].reverse(),
        series: [
          {
            name: "及时率",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}\n{c}%"
              }
            }
          }
        ]
      }
      axios.get(this.URLHEAD_TA + 'getOvertimeInfo').then(res=>{
        let json = res.data
        let percentage = (json.Data.flishOnTime / json.Data.sumNum).toFixed(2)*100
        this.option.timelinessRate.series[0].data = [{
          name:'及时处理的事务',value:percentage
        },{
          name:'未及时处理的事务',value:100 - percentage
        }]
        this.handleInTime = json.Data.flishOnTime
        this.$Crender('chart-timeliness-rate',this.option.timelinessRate)
        this.loading.timelinessRate = false
      })
    },
    renderChart_OvertimedRank(){
      this.loading.overtimedRank = true
      this.option.overtimedRank = {
        tooltip: { show: true, trigger: "axis", formatter: "{a}:{b}\n{c}" },
        grid: {
          top: 25,
          left: 10,
          right: 55,
          bottom: 25,
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLine: { show: true },
          axisTick: { show: true },
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333305" } }
        },
        yAxis: {
          type: "category",
          data: [],
          axisLine: { show: true },
          axisTick: { show: true },
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333305" } }
        },
        series: [
          {
            type: "bar",
            name: "超时情况",
            data: [],
            barWidth: "35%",
            itemStyle: {
              barBorderRadius: [0, 8, 8, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: this.COLORS[2] },
                  { offset: 1, color: this.COLORS[1] }
                ]
              }
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter(val){
                    return val.value + '次'
                }
              }
            }
          }
        ]
      };
      let params = {
        startTime:this.dateShift(-722) + ' 00:00:00',
        endTime:this.dateShift(0)+' 23:59:59'
      }
      axios.get(this.URLHEAD_DVS + 'SXSXXQKGL',{params:params}).then(res=>{
        let json = res.data
        this.option.overtimedRank.yAxis.data = json.Data.DataList.map(o=>{
          return o.Name
        })
        this.option.overtimedRank.series[0].data = json.Data.DataList.map(o=>{
          return {name:o.Name,value:o.Data}
        })
        this.handleOvertimed = json.Data.CS_Count
        this.$Crender('chart-overtimed-rank',this.option.overtimedRank)
        this.loading.overtimedRank = false
      })
    },
    renderTable(index){
      this.loading.table = true
      let params = {
        TaskEndTime_Start:this.startTime,
        TaskEndTime_End:this.endTime,
        pageIndex:index,
        pageSize:this.pageSize,
        TypeName:this.keyword
      }
      axios.get(this.URLHEAD_TA + 'getTimeAnalysis',{params:params}).then(res=>{
        let json = res.data
        this.tableData = json.Data.map((o,i)=>{
          return {
            index:i+1,
            taskTitle:o.TypeName,
            taskStartTime:o.TaskStartTime,
            taskEndTime:o.SignTime,
            taskLimit:o.TaskEndTime,
            chargerName:o.TaskUserName,
            expiration:o.isPassTime,
            depName:o.TaskOrganizationName
          }
        })
        this.pageCount = json.count
        this.loading.table = false
      })
    },
    handleSelectedDate(daterange){
      this.startTime = daterange[0]
      this.endTime = daterange[1]
    }
  },
  mounted() {
    this.renderChart_TimelinessRate()
    this.renderChart_OvertimedRank()
    this.renderTable(0)
  },
  created() {
    
  },
};
</script>

<style lang="" scoped>
.chart {
  height: 320px;
}
.toolbar .item{
  min-width: 300px;
  display: flex;
  flex-flow: row nowrap;
  align-items:center;
}
.toolbar .text{
  min-width: 100px;
  flex-grow: 0;
}
</style>